<template>
  <div class="gjf-index">
    <div class="gjf-index-top">
      <div class="gjf-index-top-item" >
        上海市三爱中医门诊部<br>
        地址：建国东路320号
      </div>
      <div class="gjf-index-top-item">
        上海市琉璃光中医门诊部<br>
        地址：浦电路114号
      </div>
    </div>
    <div class="gjf-index-list">
        <div class="gjf-index-list-item" v-for="(index) in 7" :key="index">
            <div class="gjf-index-list-item-img">
                <img src="../../public/images/doctor.jpg" alt="">
            </div>
            <div class="gjf-index-list-item-mess">
                <h4>张后杰</h4>
                <p style="fontSize:15px">擅长：外感热病、咳喘痰鸣、内伤脾胃、风湿痹痛、急症阑尾、肝胆胰</p>
                <p><button>典型案例</button><button>预约</button></p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {}
};
</script>

<style scoped>
.gjf-index{
    width: 100%;
}
.gjf-index-top{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.gjf-index-top-item{
    width: 42%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    border-radius: .625rem;
    border: 1px solid sienna;
    /* margin: 0rem 0rem 0rem .625rem; */
}
.gjf-index-top-item:nth-child(1){
    background: url("../../public/images/address_bj02.png");
    background-size: 100% 100%;
    color: white;
}
.gjf-index-list{
    width:100%;
}
.gjf-index-list-item{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: .9375rem;
}
.gjf-index-list-item-img{
    width: 40%;
    height: 100%;
    margin: 0px 0px 0px 5%;
}
.gjf-index-list-item-img img{
    width: 100%;
}
.gjf-index-list-item-mess{
    width: 45%;
    height: 100%;
    margin: 0px 0px 0px 5%;
}
.gjf-index-list-item-mess p{
    margin-top: .3125rem;
}
.gjf-index-list-item-mess p:nth-child(3){
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1.875rem;
}
.gjf-index-list-item-mess p:nth-child(3) button{
    border: none;
    outline: none;
    border-radius: .3125rem;
    background: sienna;
    color: white;
    margin: 0px 5px;
    padding: 3px 10px;
}
</style>
